import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:xmshop/app/services/httpsClient.dart';

import '../controllers/category_controller.dart';
import '../../../services/screebAdapter.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({Key? key}) : super(key: key);

// 左侧
  Widget _leftCate() {
    return Container(
      width: ScreenAdapter.width(280),
      height: double.infinity,
      child: Obx(() => ListView.builder(
            itemCount: controller.leftCategroyList.length,
            itemBuilder: (BuildContext context, int index) {
              return SizedBox(
                width: double.infinity,
                height: ScreenAdapter.height(180),
                child: InkWell(
                  onTap: () {
                    controller.changeIndex(
                        index, controller.leftCategroyList[index].id);
                  },
                  child: Obx(() => Stack(
                        children: [
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Container(
                              width: ScreenAdapter.width(10),
                              height: ScreenAdapter.height(46),
                              color: controller.selectIndex.value == index
                                  ? Colors.red
                                  : Colors.white,
                            ),
                          ),
                          Center(
                            child: Text(
                              controller.leftCategroyList[index].title,
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(36),
                                  fontWeight:
                                      controller.selectIndex.value == index
                                          ? FontWeight.bold
                                          : FontWeight.normal),
                            ),
                          )
                        ],
                      )),
                ),
              );
            },
          )),
    );
  }

  // 右侧
  Widget _rightCate() {
    return Expanded(
        flex: 1,
        child: Container(
          height: double.infinity,
          child: Obx(() => GridView.builder(
                itemCount: controller.rightCategroyList.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    crossAxisSpacing: ScreenAdapter.width(40),
                    mainAxisSpacing: ScreenAdapter.height(20),
                    childAspectRatio: 240 / 350),
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      Get.toNamed('product-list', arguments: {
                        "id": controller.rightCategroyList[index].id
                      });
                    },
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.center,
                          width: double.infinity,
                          child: Image.network(
                              HttpsClient.replaeUrl(
                                      controller.rightCategroyList[index].pic)
                                  .replaceAll('\\', '/'),
                              fit: BoxFit.fitHeight),
                        ),
                        Padding(
                          padding:
                              EdgeInsets.only(top: ScreenAdapter.width(10)),
                          child: Text(
                            controller.rightCategroyList[index].title,
                            style:
                                TextStyle(fontSize: ScreenAdapter.fontSize(32)),
                          ),
                        )
                      ],
                    ),
                  );
                },
              )),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: InkWell(
          onTap: () {
            Get.toNamed('/search');
          },
          child: Container(
            width: ScreenAdapter.width(840),
            height: ScreenAdapter.height(100),
            decoration: BoxDecoration(
                color: const Color.fromARGB(230, 252, 243, 236),
                borderRadius: BorderRadiusDirectional.circular(50)),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsets.only(
                      left: ScreenAdapter.width(34),
                      right: ScreenAdapter.width(10)),
                  child: const Icon(Icons.search),
                ),
                Text(
                  '手机',
                  style: TextStyle(
                      fontSize: ScreenAdapter.fontSize(32),
                      color: Colors.black54),
                )
              ],
            ),
          ),
        ),
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.white,
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.message_outlined,
              color: Colors.black45,
            ),
          ),
        ],
      ),
      body: Row(
        children: [
          // 左侧
          _leftCate(),
          // 右侧
          _rightCate()
        ],
      ),
    );
  }
}
